import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item{
    id: root
    width: 700; height: 100
    property string title: "VOLUMN:"
    property color backColor : "black"
    property color textColor: "white"
    property color btnColor: "#c0c0c0"
    property color normalColor: "grey"
    property color selectedColor: "yellow"

    property int volumnValue: 1
    property int size: 20
    signal volumnChanged(int volumn)

    Rectangle{
        id: rootRect
        width: root.width; height: root.height
        color: root.backColor
        // part of title
        Rectangle{
            id: labelRect;
            width: parent.width/7*2; height: parent.height
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            color: root.backColor
            Text {
                id: label
                anchors.verticalCenter: labelRect.verticalCenter
                anchors.right: labelRect.right
                anchors.rightMargin: parent.width/10
                text: root.title
                font { pixelSize: 24}
                color: textColor
            }
        }
        // part of min button
        Rectangle{
            id: minBtnRect
            width: rootRect.width/7; height: rootRect.height
            anchors.left: labelRect.right
            anchors.verticalCenter: labelRect.verticalCenter
            color: backColor
            Button{
                id: minButton
                width: parent.width/5*3;
                height: parent.height/5*3
                anchors.topMargin: parent.height/5
                anchors.leftMargin: parent.width/5
                anchors.centerIn: parent
                style: btnStyle
                Text {
                    text: "-"
                    anchors.centerIn: parent
                    font {bold: true; pixelSize: 20}
                    color: textColor
                }
                onClicked: {
                    if (--volumnValue <= 0) volumnValue = 1;
                    volumnChanged(volumnValue);
                }
            }
        }
        // part of plus button
        Rectangle{
            id: plusBtnRect
            width: rootRect.width/7; height: rootRect.height
            anchors.right: rootRect.right
            anchors.verticalCenter: rootRect.verticalCenter
            color: backColor
            Button{
                id: plusButton
                width: parent.width/5*3;
                height: parent.height/5*3
                anchors.topMargin: parent.height/5
                anchors.leftMargin: parent.width/5
                anchors.centerIn: parent
                style: btnStyle
                Text {
                    text: "+"
                    anchors.centerIn: parent
                    font {bold: true; pixelSize: 20}
                    color: textColor
                }
                onClicked: {
                    if (++volumnValue > size) volumnValue = size;
                    volumnChanged(volumnValue);
                }
            }
        }

        Component{
            id: btnStyle
            ButtonStyle{
                background: Rectangle{
                    border.color: "white"
                    border.width: control.hovered? 2 : 1
                    color: control.hovered? Qt.darker(btnColor, 2): btnColor
                    radius: 5
                }
            }
        }

        Rectangle{
            id: progressRect
            width: rootRect.width/7*3; height: rootRect.height
            color: backColor
            anchors.left: minBtnRect.right
            anchors.verticalCenter: rootRect.verticalCenter
            Rectangle{
                id: process
                height: parent.height/2
                width: parent.width
                anchors.centerIn: parent
                color: backColor
                Row{
                    anchors.fill: parent
                    spacing: process.width/size/3
                    Repeater{
                        model: size
                        Rectangle{
                            height: process.height
                            width: process.width/size/3*2
                            radius: width/2
                            color: index+1 == volumnValue ? selectedColor:normalColor
                        }
                    }
                }
            }
        }
    }
}
